<template>
  <view class="container">
    <!-- 题型选择界面 -->
    <view v-if="!isStarted" class="type-selection">
      <view class="title">请选择题目类型</view>
      <view
        v-for="(name, type) in questionTypes"
        :key="type"
        class="type-item"
        @click="selectType(type)"
      >
        {{ name }}
      </view>
      <view class="type-item" @click="selectType('RANDOM')">
        随机混合题目
      </view>
    </view>

    <!-- 答题界面 -->
    <view v-else>
      <view class="question-nav">
        <view
          class="nav-btn"
          @click="prevQuestion"
          :class="{ disabled: currentIndex === 0 }"
          >上一题</view
        >
        <view class="question-counter"
          >{{ currentIndex + 1 }}/{{ totalQuestions }}</view
        >
        <view
          class="nav-btn"
          @click="nextQuestion"
          :class="{ disabled: currentIndex === totalQuestions - 1 }"
          >下一题</view
        >
      </view>

      <!-- 添加返回按钮 -->
      <view class="back-btn" @click="backToSelection">返回题型选择</view>

      <!-- 根据题目类型显示不同的组件 -->
      <fill-in-blank
        v-if="currentQuestion.type === 'fillInBlank'"
        :question="currentQuestion"
        @next="nextQuestion"
      ></fill-in-blank>
      <single-choice
        v-else
        :question="currentQuestion"
        @next="nextQuestion"
      ></single-choice>
    </view>
  </view>
</template>

<script>
import FillInBlank from "../../components/FillInBlank.vue";
import SingleChoice from "../../components/SingleChoice.vue";
import { questionBank } from "../../data/questionBank.js";

export default {
  components: {
    FillInBlank,
    SingleChoice,
  },
  data() {
    return {
      currentIndex: 0,
      questions: [],
      isStarted: false,
      questionTypes: {
        TRAVEL_EXPENSE: "出差费用管理制度",
        REIMBURSEMENT: "费用报销制度",
        RECEIPT_MANAGEMENT: "收据管理办法",
        HR_MANAGEMENT: "人力资源管理制度",
      },
      selectedType: "",
    };
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentIndex];
    },
    totalQuestions() {
      return this.questions.length;
    },
  },
  methods: {
    prevQuestion() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      }
    },
    nextQuestion() {
      if (this.currentIndex < this.totalQuestions - 1) {
        this.currentIndex++;
      }
    },
    selectType(type) {
      this.selectedType = type;
      this.generateQuestions(type);
      this.isStarted = true;
    },
    generateQuestions(type) {
      if (type === "RANDOM") {
        this.questions = questionBank.generateQuestions(); // 随机所有类型的题目
      } else {
        this.questions = questionBank.generateQuestionsByType(type); // 需要在 questionBank 中实现此方法
      }
    },
    backToSelection() {
      this.isStarted = false;
      this.currentIndex = 0;
      this.questions = [];
      this.selectedType = "";
    },
  },
  created() {
    // 不再自动生成题目，等待用户选择题型
  },
};
</script>

<style>
.container {
  padding: 20rpx;
}

.question-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.nav-btn {
  padding: 15rpx 30rpx;
  background-color: #409eff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.nav-btn.disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

.question-counter {
  font-size: 32rpx;
  color: #666;
}

.type-selection {
  padding: 40rpx;
}

.type-selection .title {
  font-size: 36rpx;
  text-align: center;
  margin-bottom: 40rpx;
  color: #333;
}

.type-item {
  margin: 20rpx 0;
  padding: 30rpx;
  background-color: #409eff;
  color: #fff;
  border-radius: 8rpx;
  text-align: center;
  font-size: 32rpx;
}

.type-item:active {
  background-color: #3a8ee6;
}

.back-btn {
  margin: 20rpx auto;
  padding: 15rpx 30rpx;
  background-color: #909399;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  width: fit-content;
  text-align: center;
}

.back-btn:active {
  background-color: #82848a;
}
</style>
